<!--
访问地址：https://paycloud.vip

 -->
<!DOCTYPE html>
<html>
	<head>

		<meta charset="UTF-8">
		<title>index</title>
		<link rel="stylesheet" type="text/css" href="../css/reset.css" />
		<link rel="stylesheet" type="text/css" href="../css/style.css" />
		<script src="https://www.jq22.com/jquery/jquery-1.10.2.js"></script>
		<script src="laydate/laydate.js"></script>
		<script src="https://www.jq22.com/jquery/echarts-4.2.1.min.js"></script>

		<script src="../js/jquery.nicescroll.min.js"></script>

	</head>
	<body>
		<div id="container">
			<div class="page_top">
				<div class="top_left">
					<div class="logo">
						<img src="../images/logo.jpg" />
					</div>
					<h2 class="wms_name"><span id="x1">保税区A仓</span><em>单仓</em></h2>
					<div class="depot">
						<input type="text" placeholder="选择仓库..." readonly="readonly" />
						<div class="depo_down">
							<ul id="myList">

							</ul>
						</div>
					</div>
				</div>
				<script>
					    $(document).ready(function() {  
					      // 在页面初始化时调用myMethod方法  
						  var warehouse = null;
					      $(this).myFunction(null);
					    });  
				</script>
				<script>
					//获取仓库信息
					$.fn.myFunction = function(id) {
						$.ajax({
							url: 'http://127.0.0.1:8088/warehouse/getList', // 请求的URL  
							type: 'GET', // 请求类型为GET  
							dataType: 'json', // 预期服务器返回的数据类型为JSON  
							success: function(data, status, xhr) {
								// 在请求成功时执行的回调函数  
								console.log(data); // 输出从服务器返回的数据 
								warehouse = ""
								warehouse = data
								// 遍历数组并添加到li标签中  
								
								//改变仓库名称
								if (id == null) {
									$.each(data, function(index, value) {
										$('#myList').append('<li>' + value.name + '</li>');
									});
									$("#x1").text(data[0].name)
									$(this).myFunction7(data[0].id);
									$(this).myFunction1(data[0].id);
									$(this).myFunction2(data[0].id);
									$(this).myFunction3(data[0].id);
									$(this).myFunction4(data[0].id);
									$(this).myFunction5(data[0].id);
									$(this).myFunction6(data[0].id);
								} else {
									$(this).myFunction7(id);
									$(this).myFunction1(id);
									$(this).myFunction2(id);
									$(this).myFunction3(id);
									$(this).myFunction4(id);
									$(this).myFunction5(id);
									$(this).myFunction6(id);
								}
								// alert("1")


							},
							error: function(xhr, status, error) {
								// 在请求失败时执行的回调函数  
								console.error(error); // 输出错误信息  
							}
						});
					}
					//选择事件
					$.fn.myFunction7 = function(id) {
						//获取汇总的值
						$.ajax({
							url: 'http://127.0.0.1:8088/summary/getOne?warehouseId=' + id,
							type: 'GET',
							success: function(response) {
								console.log(response);
								$('#num1').text(response.notsingleVolumeWasMade);
								$('#num2').text(response.todayOutboundVolume);
								$('#num3').text(response.totalOrderQuantity);
								$('#num4').text(response.totalOutboundVolume);
								$('#num5').text(response.unshippedQuantity);

							},
							error: function(error) {
								console.log(error);
							}
						});
					}
					$.fn.myFunction1 = function(id) {
						$.ajax({
							url: 'http://127.0.0.1:8088/orders/getLineList?warehouseId=' + id,
							type: 'GET',
							success: function(response) {
								console.log(response);
								var xx1 = response.inboundOrdersList;
								var xx2 = response.outboundOrdersList;
								var xx3 = response.pickOrdersList;
								var xx4 = response.qualityInspectionOrdersList;
								$("#vo1").text(response.inboundOrders)
								$("#vo2").text(response.outboundOrders)
								$("#vo3").text(response.pickOrders)
								$("#vo4").text(response.qualityInspectionOrders)
								// 你的代码在这里...
								var myChart1 = echarts.init(document.getElementById('home_today'));
								var option1 = {
									backgroundColor: '#1b1e25',
									title: {
										text: ''
									},

									tooltip: {
										enterable: true,
										trigger: 'axis'

									},
									grid: {
										left: '3%',
										right: '3%',
										top: '10%',
										bottom: "2%",
										containLabel: true
									},
									xAxis: [{
										axisLine: {
											lineStyle: {
												color: '#3e4148',
												width: 1, //这里是为了突出显示加上的
											}
										},
										type: 'category',
										boundaryGap: false,
										data: ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9', '10',
											'11', '12', '13', '14',
											'15', '16', '17', '18', '19', '20', '21', '22', '23', '23',
											'24'
										]
									}],
									yAxis: [{
										splitLine: {
											lineStyle: {
												color: '#21242b',
											}
										},
										type: 'value',
										axisLine: {
											lineStyle: {
												color: '#43484e',
												width: 0, //这里是为了突出显示加上的
											}
										}
									}],
									series: [{
											name: '新增单量',
											type: 'line',
											symbol: 'none',
											data: xx1,
											smooth: true,
											itemStyle: {
												normal: {
													lineStyle: {
														color: '#533d86'
													}
												}
											},
											areaStyle: {
												normal: {
													color: ['rgba(255,255,255,0.1)']
												}
											},

										},
										{
											name: '拣选单量',
											type: 'line',
											symbol: 'none',
											data: xx2,
											smooth: true,
											itemStyle: {
												normal: {
													lineStyle: {
														color: '#60ba9e'
													}
												}
											},
											areaStyle: {
												normal: {
													color: ['rgba(255,255,255,0.1)']
												}
											},

										},
										{
											name: '质检单量',
											type: 'line',
											symbol: 'none',
											data: xx3,
											smooth: true,
											itemStyle: {
												normal: {
													lineStyle: {
														color: '#476d9e'
													}
												}
											},
											areaStyle: {
												normal: {
													color: ['rgba(255,255,255,0.1)']
												}
											},

										},
										{
											name: '出库单量',
											type: 'line',
											symbol: 'none',
											data: xx4,
											smooth: true,
											itemStyle: {
												normal: {
													lineStyle: {
														color: '#b1526a'
													}
												}
											},
											areaStyle: {
												normal: {
													color: ['rgba(255,255,255,0.1)']
												}
											},
										}
									]
								};
								myChart1.setOption(option1); //今日作业趋势
							},
							error: function(error) {
								console.log(error);
							}
						});


					};
				</script>
				<script>
					$.fn.myFunction2 = function(id) {
						$.ajax({
							url: 'http://127.0.0.1:8088/orders/getHistogram?warehouseId=' + id,
							type: 'GET',
							success: function(response) {
								console.log(response);
								var myChart2 = echarts.init(document.getElementById('ship_order'));
								var option2 = {
									backgroundColor: '#1b1e25',
									title: {
										text: '货主订单执行情况',
										textStyle: { //设置主标题风格
											color: '#ffffff', //设置主标题字体颜色
											fontSize: '14px',

										},
										// subtext: '货主1   货主2     货主3     货主4     货主5     货主6      货主7',
										subtextStyle: {
											color: '#ffffff' // 副标题文字颜色
										}
									},
									color: ['#ed4b97', '#26a0c9', '#44cb90'],
									tooltip: {},
									legend: {
										data: ['未开始', '作业中', '出库'],
										textStyle: {
											color: '#ffffff'
										},
										right: 10,
										itemWidth: 10,
										itemHeight: 10
									},

									calculable: true,
									grid: {
										left: '3%',
										right: '3%',
										bottom: "20",
										containLabel: true
									},
									xAxis: [{
										type: 'category',
										axisTick: {
											show: false
										},
										data: response.nameList,
										"axisLabel": {
											interval: 0
										},
										axisLine: {
											lineStyle: {
												color: '#ffffff',
												width: 1, //这里是为了突出显示加上的
											}
										},

									}],
									dataZoom: [{
										type: 'slider',
										show: true, //flase直接隐藏图形
										xAxisIndex: [0],
										left: '9%', //滚动条靠左侧的百分比
										bottom: -5,
										height: 15,
										start: 0, //滚动条的起始位置
										end: 50
									}],
									yAxis: [{
										splitLine: {
											lineStyle: {
												color: '#21242b',
											}
										},
										type: 'value',
										axisLine: {
											lineStyle: {
												color: '#43484e',
												width: 0, //这里是为了突出显示加上的
											}
										}
									}],
									series: [{
											name: '未开始',
											type: 'bar',
											barGap: 0.2,
											data: response.notStartList
										},
										{
											name: '作业中',
											type: 'bar',
											data: response.ongoingList
										},
										{
											name: '已完成',
											type: 'bar',
											data: response.finishList
										}
									]
								};
								myChart2.setOption(option2); //货主订单执行情况
							},
							error: function(error) {
								console.log(error);
							}
						});


					}
				</script>
				<script>
					$.fn.myFunction3 = function(id) {
						$.ajax({
							url: 'http://127.0.0.1:8088/orders/getPieList?warehouseId=' + id,
							type: 'GET',
							success: function(response) {
								console.log(response);
								var myChart3 = echarts.init(document.getElementById('imple'));
								var option3 = {
									grid: {
										left: '3%',
										right: '3%',
										top: '10%',
										bottom: "2%",
										containLabel: true
									},
									title: {
										text: '订单执行情况',
										textStyle: { //设置主标题风格
											color: '#90939a', //设置主标题字体颜色
											fontSize: '14px',

										},
									},
									backgroundColor: '#1b1e25',
									tooltip: {
										trigger: 'item',
										formatter: " {b}:{d}%"
									},
									legend: {
										orient: 'vertical',
										right: 10,
										y: 'center',
										textStyle: {
											color: '#7c8081'
										},
										itemWidth: 10,
										itemHeight: 10,
										data: ['未开始', '波次', '拣选', '质检', '拦截', '出库'],
										formatter: function(params) {
											for (var i = 0; i < option3.series[0].data.length; i++) {
												if (option3.series[0].data[i].name == params) {
													return params + ":" + option3.series[0].data[i].value;
												}
											}
										}

									},
									series: [{
										name: '订单执行情况',
										type: 'pie',
										radius: ['50%', '70%'],
										avoidLabelOverlap: false,
										label: {
											normal: {
												show: false,
												position: 'center'
											},
											emphasis: {
												show: true,
												textStyle: {
													fontSize: '20',
													fontWeight: 'bold'
												}
											}
										},

										labelLine: {
											normal: {
												show: false
											}
										},
										data: response,
										itemStyle: {
											emphasis: {
												shadowBlur: 10,
												shadowOffsetX: 0,
												shadowColor: 'rgba(0, 0, 0, 0.5)'
											},
											normal: {
												color: function(params) {
													//自定义颜色
													var colorList = [
														'#74529e', '#da8f3c', '#447cb7', '#be4868',
														'#4dc892',
														'#efbb43',
													];
													return colorList[params.dataIndex]
												}
											}
										}
									}]
								};
								myChart3.setOption(option3); //订单执行情况
							},
							error: function(error) {
								console.log(error);
							}
						});

					}
				</script>
				<script>
					$.fn.myFunction4 = function(id) {
						$.ajax({
							url: 'http://127.0.0.1:8088/orders/getSum?warehouseId=' + id,
							type: 'GET',
							success: function(response) {
								console.log(response);
								$('#ss1').text(response.inboundOrders)
								$('#ss2').text(response.outboundOrders)
								$('#ss3').text(response.qualityInspectionOrders)
								$('#ss4').text(response.pickOrders)
								$('#ss5').text(response.abnormalOrders)
							},
							error: function(error) {
								console.log(error);
							}
						});

					}
				</script>
				<script>
					$.fn.myFunction5 = function(id) {
						$.ajax({
							url: 'http://127.0.0.1:8088/orders/getOutboundRate?warehouseId=' + id,
							type: 'GET',
							success: function(response) {
								console.log(response);
								$("#myList1").empty();
								$.each(response, function(index, value) {
									// Create new elements  
									const contDiv = $("<div>").addClass("abort_cont");
									const nameDiv = $("<div>").addClass("abort_name").text(value.name);
									const numDiv = $("<div>").addClass("abort_num").text(value.percentage +
										"%");

									// Append child elements to the container div  
									contDiv.append(nameDiv);
									contDiv.append(numDiv);

									// Append the container div to the desired location in the DOM (replace '#target' with your selector)  
									$("#myList1").append(contDiv);
								});
							},
							error: function(error) {
								console.log(error);
							}
						});

					}
				</script>
				<script>
					$.fn.myFunction6 = function(id) {
						$.ajax({
							url: 'http://127.0.0.1:8088/orders/getWorkload?warehouseId=' + id,
							type: 'GET',
							success: function(response) {
								console.log("6" + response);

								// 遍历数据并生成节点  
								response.forEach(item => {
									const listItem = $("<li></li>");

									const situTop = $("<div>").addClass("situ_top");
									const situName = $("<span>").addClass("situ_name").text(item.name);
									const situTime = $("<span>").addClass("situ_time").text(`(${item.hour})`);
									situTop.append(situName, situTime);
									listItem.append(situTop);

									const lssl = $("<div>").addClass("lssl");
									const lslName = $("<div>").addClass("lsl_name").text("出库量");
									const lalNum = $("<div>").addClass("lal_num").text(item.purchase);
									lssl.append(lslName, lalNum);
									listItem.append(lssl);

									const lalAll = $("<div>").addClass("lal_all");
									listItem.append(lalAll);

									const quan = $("<div>").addClass("quan");
									const quanName = $("<div>").addClass("quan_name").text("接单量");
									const quanNum = $("<div>").addClass("quan_num").text(item.shipping);
									quan.append(quanName, quanNum);
									listItem.append(quan);

									const quanAll = $("<div>").addClass("quan_all");
									const tity = $("<div>").addClass("tity");
									quanAll.append(tity);
									listItem.append(quanAll);

									// 追加到目标元素，例如一个ul元素中，选择器可能需要更改为您的实际目标元素的选择器  
									$("#myList2").append(listItem);
								});
							},
							error: function(error) {
								console.log(error);
							}
						});

					}
				</script>
				<script>
					//切换仓库接口
					$("#myList").on('click', 'li', function() {
						$("#x1").text($(this).text())
						console.log(warehouse)
						$.each(warehouse, function(key, value) {
							// console.log(value)
							var text = $("#x1").text()
							console.log(text)
							if(value.name == text){
								// console.log("测试二"+value.id)
								$(this).myFunction(value.id);
							}
						});
					});
				</script>

				<div class="top_time">
					<input type="text" class="time_star" id="time_star" value="2018-11-11 00:00:00"
						readonly="readonly" /><span>至</span><input type="text" class="time_end" id="time_end"
						value="2018-12-11 00:00:00" readonly="readonly" />
				</div>
			</div>
			<!--顶部-->
			<div class="order_list">
				<div class="order">
					<div class="order_name">总单量</div>
					<h2 class="order_num" id="num1">204398</h2>
				</div>
				<div class="order">
					<div class="order_name">总出库量</div>
					<h2 class="order_num" id="num2">197672</h2>
				</div>
				<div class="order">
					<div class="order_name">未出库单量</div>
					<h2 class="order_num" id="num3">1350</h2>
				</div>
				<div class="order">
					<div class="order_name">今天出库量</div>
					<h2 class="order_num" id="num4">5414</h2>
				</div>
				<div class="order">
					<div class="order_name">未开始单量</div>
					<h2 class="order_num" id="num5">734</h2>
				</div>
			</div>
			<!--订单量-->
			<div class="main">
				<div class="main_left">
					<div class="home_today">
						<div class="home_tit">
							今天作业趋势图
						</div>
						<div class="home_list">
							<div class="home_order">
								<div class="home_name">
									入库单量
								</div>
								<div id="vo1" class="home_num new_num">
									86
								</div>
							</div>
							<div class="home_order">
								<div class="home_name">
									拣选单量
								</div>
								<div id="vo2" class="home_num jian_num">
									0
								</div>
							</div>
							<div class="home_order">
								<div class="home_name">
									质检单量
								</div>
								<div id="vo3" class="home_num zhi_num">
									2
								</div>
							</div>
							<div class="home_order">
								<div class="home_name">
									出库单量
								</div>
								<div id="vo4" class="home_num chu_num">
									5
								</div>
							</div>
						</div>
						<div id="home_today"></div>
						<!--今日作业趋势图-->
					</div>
					<div class="ship_order" id="ship_order"></div>
					<!--货主订单执行情况-->
				</div>
				<div class="main_midd">
					<div class="imple" id="imple"></div>
					<!--订单执行情况-->
					<div class="order_wait">
						<div class="commis">
							<div class="comm_tit">
								订单代办事项
							</div>
							<div class="comm_list">
								<div class="comm_cont">
									<span class="com_name">入库等待</span><span id="ss1" class="com_num">228</span>
								</div>
							</div>
							<div class="comm_list">
								<div class="comm_cont">
									<span class="com_name">分拣等待</span><span id="ss2" class="com_num">9</span>
								</div>
							</div>
							<div class="comm_list">
								<div class="comm_cont">
									<span class="com_name">质检等待</span><span id="ss3" class="com_num">0</span>
								</div>
							</div>
							<div class="comm_list">
								<div class="comm_cont">
									<span class="com_name">出库等待</span><span id="ss4" class="com_num">0</span>
								</div>
							</div>
							<div class="comm_list">
								<div class="comm_cont">
									<span class="com_name">异常等待</span><span id="ss5" class="com_num">0</span>
								</div>
							</div>
						</div>

						<!--订单代办事项-->
						<div class="abort">
							<div class="abot_tit">
								截止时间出库率
							</div>
							<div class="abort_box">
								<div class="abort_list">
									<div id="myList1" class="abort_use">





									</div>

								</div>
							</div>
						</div>
						<!--截止时间出库率-->
					</div>

				</div>
				<div class="main_rig">
					<div class="situ_tit">
						上一小时作业情况
					</div>
					<div class="situ_use">
						<div class="situ_list">

							<ul id="myList2">







							</ul>
						</div>
					</div>
				</div>
			</div>
		</div>
	</body>

	<script src="../js/index.js"></script>

	<script>
		$(".order_num").each(function() {
			var that = $(this);
			var text1 = that.text();
			var text1_1 = parseInt(text1);
			var te = formatNum(text1_1 + "");
			that.text(te)
		})


		function formatNum(str) {
			var newStr = "";
			var count = 0;
			if (str.indexOf(".") == -1) {
				for (var i = str.length - 1; i >= 0; i--) {
					if (count % 3 == 0 && count != 0) {
						newStr = str.charAt(i) + "," + newStr;
					} else {
						newStr = str.charAt(i) + newStr;
					}
					count++;
				}
				str = newStr;
				return str;
			}

		}
	</script>
</html>
